<template>
	<view>
		<u-navbar  :title="info.name" :autoBack="true" safeAreaInsetTop fixed placeholder />
		<view>
			<uni-card :cover="cover" title="基本信息" padding="0">
				<view>
					<u-cell-group>
						<!-- <u-cell center :arrow="false" title="班级名称">
							<view class="u-font-md text-black" slot="value">{{info.name}}</view>
						</u-cell> -->
						
						<u-cell center :arrow="false" title="班主任">
							<view class="u-font-md text-black" slot="value">{{info.teacherName}}</view>
						</u-cell>
						
						<u-cell center :arrow="false" title="教室">
							<view class="u-font-md text-black" slot="value">{{info.classroomName}}</view>
						</u-cell>
						
						<u-cell center :arrow="false" title="相关课程">
							<view class="u-font-md text-black" slot="value">{{info.courseName}}</view>
						</u-cell>
						
						<u-cell center  :arrow="false" title="开始日期">
							<view class="u-font-md text-black" slot="value">
								{{this.$common.timeFormat(info.startDate, 'yyyy年MM月dd日')}} 
							</view>
						</u-cell>
						
						<u-cell center  :arrow="false" title="截止日期">
							<view class="u-font-md text-black" slot="value">
								{{this.$common.timeFormat(info.endDate, 'yyyy年MM月dd日')}}
							</view>
						</u-cell>
						
						<u-cell center :arrow="false" title="课程进度">
							<view class="u-font-md text-black" slot="value">{{info.overLessonCount?info.overLessonCount:0}} /
								{{info.plannedLessonCount}}</view>
						</u-cell>
						
						<u-cell center :arrow="false" title="招生进度">
							<view class="u-font-md text-black" slot="value">{{info.studentCount?info.studentCount:0}} /
								{{info.scheduleLessonCount ? info.scheduleLessonCount : 0}} </view>
						</u-cell>
						
						<u-cell center :arrow="false" title="备注">
							<view class="u-font-md text-black" slot="value">{{info.remark}}</view>
						</u-cell>
						
						<u-cell center :arrow="false" title="班级状态">
							<view class="u-font-md text-black" slot="value">{{info.beOver?'已结课':'进行中'}}</view>
						</u-cell>
					</u-cell-group>
				</view>
			</uni-card>
			
			<view>
				<uni-card :cover="cover" title="班级学员" padding="0">
					<view class="u-margin-bottom-20">
						<!-- <u-read-more :show-height="500" close-text="全部学员"> -->
						<u-cell-group>
							<u-cell v-for="(item,index) in studentList" :key='index' center 
								:is-link="false" :arrow="true" @click="studentdetail(item.id)">
								<u-icon slot="icon" class="u-m-r-30" name="woman" color="#ff557f" size="28" v-if="item.gender == '女'"></u-icon>
								<u-icon slot="icon" class="u-m-r-30" name="man" color="#2979ff" size="28" v-if="item.gender == '男'"></u-icon>
								<view slot="title">
									{{item.name}}
								</view>
								<view slot="value">剩余: {{item.countLessonRemaining||0}}</view>
							</u-cell>
						</u-cell-group>
						<!-- </u-read-more> -->
						<view class="u-padding-30 bg-white" v-if="studentList.length == 0" >
							<u-empty mode="list" text="暂无学员"></u-empty>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/utils/request'
	export default {
		components: {
		},
		data() {
			return {
				classId: '',
				info: {},
				studentList: [],

				showSelecter: false,
			}
		},
		onLoad(option) {
			this.classId = option.classId
			this.getInfo()
			this.getStudentList()
		},
		methods: {
			getInfo() {
				request({url:'/erp/class/get', data:{
					id: this.classId
				}}).then(res => {
					if (!this.$common.handleResponseMsg(res)) return;
					this.info = res.data
				});
			},
			getStudentList() {
				request({url:'/erp/student/studentList', data:{
					classId: this.classId
				}}).then(res => {
					if (!this.$common.handleResponseMsg(res)) return;
					this.studentList = res.data.list
				});
			},
			studentdetail(id) {
				uni.navigateTo({
					url: `/pages/student/detail?studentId=${id}`
				});
			},
			selectStudent() {
				this.showSelecter = true
			},
			clickLeft() {
				uni.switchTab({
					url: '/pages/class/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
